<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>易买网</title>
      <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head>
  <body>
      <!--头部-->
      <jsp:include page="commons/header.jsp" />

      <div id="main" class="wrap">
          <!--左侧分类-->
          <jsp:include page="commons/left.jsp" />

          <!-- 主要内容 -->
          <div class="main">
              <div id="register" class="main">
                  <!--登录框-->
                  <div class="shadow" style="float:left;width: 500px;margin: 20px 15px">
                      <em class="corner lb"></em> <em class="corner rt"></em>
                      <div class="box">
                          <h1>欢迎回到易买网</h1>
                          <form id="loginForm" method="get" action="/login" onsubmit="return checkForm()">
                              <table>
                                  <tr>
                                      <td class="field">用户名：</td>
                                      <td>
                                          <input class="text" type="text" id="userName" name="username"   />
                                          <span class="error" style="display: none" id="userNameMsg"></span>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td class="field">密码：</td>
                                      <td>
                                          <input class="text" type="password" id="password" name="password" />
                                          <span class="error" style="display: none" id="passwordMsg"></span>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td class="field">验证码：</td>
                                      <td>
                                          <input  class="text" style="width: 60px;margin-right: 10px;"
                                                  type=text  name="verifyCode" id="imageCode">
                                          <img onclick="javascript:loadimage();" title="换一张试试" name="randImage"
                                               id="randImage" src="/captcha" width="60" height="20" border="1"
                                               align="absmiddle">
                                          <span class="error" style="display: none" id="imageMsg"></span>
                                      </td>
                                  </tr>

                                  <tr>
                                      <td></td>
                                      <td><label class="ui-green">
                                          <input type="submit" value="立即登录" /> </label>&nbsp;&nbsp;&nbsp;&nbsp;
                                          <font id="error"  color="red">${error}</font>
                                      </td>
                                  </tr>
                              </table>
                          </form>
                      </div>
                  </div >
                  <!--右侧公告和广告-->
                  <jsp:include page="commons/right.jsp" />

              </div>
          </div>
          <div class="clear"></div>
      </div>

      <!--底部-->
      <jsp:include page="commons/footer.jsp" />

  </body>
  <script src="js/jquery-1.11.1.js"></script>
  <script>
      $(document).ready(function() {
          var currentUser = '${currentUser}';
          if (currentUser != null && currentUser !='') {
              window.location.href = "/index";
              return;
          }
      });

      // 点击变换图片验证码
      function loadimage() {
          document.getElementById("randImage").src = "captcha?" + Math.random();
      }

      // 校验用户名不能为空
      function checkUsername() {
          var username = document.getElementById("userName").value;
          if (username == null || username == '') {
              $("#userNameMsg").html("请输入用户名！");
              $("#userNameMsg").css('display', "inline-block");
              return false;
          }
          return true;
      }

      // 密码不能为空
      function checkPassword() {
          var password = document.getElementById("password").value;
          if (password == null) {
              $("#passwordMsg").html("请输入密码！");
              $("#passwordMsg").css('display', "inline-block");
              return false;
          }
          return true;
      }

      // 验证码不能为空
      function checkVerifyCode() {
          var verifyCode = $("#imageCode").val();
          if (verifyCode == null) {
              $("#imageMsg").html("请输入验证码！");
              $("#imageMsg").css('display', "inline-block");
              return false;
          }
          return true;
      }

      function cleanError() {
          $("#userNameMsg").html("");
          $("#userNameMsg").css('display', "none");

          $("#passwordMsg").html("");
          $("#passwordMsg").css('display', "none");

          $("#imageMsg").html("");
          $("#imageMsg").css('display', "none");
      }

      // 表单校验
      function checkForm () {
          var username = $("#userName").val();
          if (username == null || $.trim(username).length == 0) {
              $("#userNameMsg").html("请输入用户名！");
              $("#userNameMsg").css('display', "inline-block");
              return false;
          }
          var password = $("#password").val();
          if (password == null || password == '') {
              // alert("请输入密码");
              $("#passwordMsg").html("请输入密码！");
              $("#passwordMsg").css('display', "inline-block");
              return false;
          }
          var verifyCode = $("#imageCode").val();
          if (verifyCode == null || $.trim(verifyCode).length == 0) {
              $("#imageMsg").html("请输入验证码！");
              $("#imageMsg").css('display', "inline-block");
              return false;
          }
          return true;
      }



  </script>

</html>